import React, { forwardRef } from 'react';
import './index.scss';

export interface ComprehensiveDataPanelProps {
  /**
   * 组件整体宽度
   */
  width?: string | number;

  /**
   * 组件整体高度
   */
  height?: string | number;

  /**
   * 左侧背景图片路径
   */
  leftBackgroundImage?: string;

  /**
   * 中间背景图片路径
   */
  middleBackgroundImage?: string;

  /**
   * 右侧背景图片路径
   */
  rightBackgroundImage?: string;

  /**
   * 左侧项目配置
   */
  leftItems?: Array<{
    iconPath?: string;
    text?: string;
    textColor?: string;
    fontSize?: number;
    fontFamily?: string;
    fontWeight?: string | number;
    letterSpacing?: string;
    lineHeight?: string;
    onClick?: () => void;
  }>;

  /**
   * 中间数据统计配置
   */
  middleDataStats?: Array<{
    title?: string;
    value?: string | number;
    titleColor?: string;
    valueColor?: string;
    titleFont?: {
      fontSize?: number;
      fontFamily?: string;
      fontWeight?: string | number;
      letterSpacing?: string;
      lineHeight?: string;
    };
    valueFont?: {
      fontSize?: number;
      fontFamily?: string;
      fontWeight?: string | number;
      letterSpacing?: string;
      lineHeight?: string;
    };
  }>;

  /**
   * 右侧项目配置
   */
  rightItems?: Array<{
    iconPath?: string;
    text?: string;
    textColor?: string;
    fontSize?: number;
    fontFamily?: string;
    fontWeight?: string | number;
    letterSpacing?: string;
    lineHeight?: string;
    onClick?: () => void;
  }>;

  /**
   * 是否显示三角形装饰元素
   */
  showTriangleDecorations?: boolean;

  /**
   * 主题样式
   */
  theme?: 'light' | 'dark';

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;

  /**
   * 点击事件
   */
  onClick?: () => void;

  // 低代码平台相关属性（不会传递到DOM）
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const ComprehensiveDataPanel = forwardRef<HTMLDivElement, ComprehensiveDataPanelProps>(function ComprehensiveDataPanel({
  width = '100%',
  height = 101,
  leftBackgroundImage = 'http://localhost:8085/static/images/shouye/路径备份 5.png',
  middleBackgroundImage = 'http://localhost:8085/static/images/shouye/编组 63.png',
  rightBackgroundImage = 'http://localhost:8085/static/images/shouye/路径备份 6.png',
  leftItems = [
    {
      iconPath: 'http://localhost:8085/static/images/shouye/编组 60.png',
      text: '综合压力表',
      textColor: '#00FFF1',
      fontSize: 24,
      fontFamily: 'PangMenZhengDao',
      fontWeight: 'normal',
      letterSpacing: '1px',
      lineHeight: '27px'
    },
    {
      iconPath: 'http://localhost:8085/static/images/shouye/bz60.png',
      text: '舆情风向标',
      textColor: 'rgba(255,255,255,0.8)',
      fontSize: 24,
      fontFamily: 'PangMenZhengDao',
      fontWeight: 'normal',
      letterSpacing: '1px',
      lineHeight: '27px'
    }
  ],
  middleDataStats = [
    {
      title: '累计到发人数',
      value: '1,225,568,047',
      titleColor: 'rgba(255,255,255,0.8)',
      valueColor: '#FFFFFF',
      titleFont: {
        fontSize: 24,
        fontFamily: 'SourceHanSansSC',
        fontWeight: 400,
        letterSpacing: '0.86px',
        lineHeight: '35px'
      },
      valueFont: {
        fontSize: 32,
        fontFamily: 'DINAlternate',
        fontWeight: 'bold',
        letterSpacing: '3px',
        lineHeight: '37px'
      }
    }
  ],
  rightItems = [
    {
      iconPath: 'http://localhost:8085/static/images/shouye/编组 60.png',
      text: '改革助力窗',
      textColor: '#FFFFFF',
      fontSize: 28,
      fontFamily: 'PangMenZhengDao',
      fontWeight: 'normal',
      letterSpacing: '2px',
      lineHeight: '32px'
    },
    {
      iconPath: 'http://localhost:8085/static/images/shouye/编组 60.png',
      text: '告警中心',
      textColor: '#FFFFFF',
      fontSize: 28,
      fontFamily: 'PangMenZhengDao',
      fontWeight: 'normal',
      letterSpacing: '2px',
      lineHeight: '32px'
    }
  ],
  showTriangleDecorations = true,
  theme = 'dark',
  style = {},
  className = '',
  onClick,
  __designMode,
  componentId,
  _componentName,
  forwardRef: forwardRefProp,
  ...otherProps
}, ref) {

  const handleClick = () => {
    onClick?.();
  };

  // 构建CSS类名
  const panelClassName = [
    'comprehensive-data-panel',
    `theme-${theme}`,
    className
  ].filter(Boolean).join(' ');

  // 渲染左侧项目
  const renderLeftItems = () => {
    return leftItems?.map((item, index) => (
      <div
        key={`left-item-${index}`}
        className="left-item"
        onClick={item.onClick}
      >
        <img
          className="item-icon"
          src={item.iconPath}
          alt={item.text || ''}
          referrerPolicy="no-referrer"
        />
        <span
          className="item-text"
          style={{
            color: item.textColor,
            fontSize: item.fontSize ? `${item.fontSize}px` : undefined,
            fontFamily: item.fontFamily,
            fontWeight: item.fontWeight,
            letterSpacing: item.letterSpacing,
            lineHeight: item.lineHeight
          }}
        >
          {item.text}
        </span>
      </div>
    ));
  };

  // 渲染中间数据统计
  const renderMiddleDataStats = () => {
    return middleDataStats?.map((stat, index) => (
      <div
        key={`middle-stat-${index}`}
        className="middle-stat"
      >
        {showTriangleDecorations && (
          <div className="triangle-decoration" />
        )}
        <div className="stat-content">
          <div
            className="stat-title"
            style={{
              color: stat.titleColor,
              fontSize: stat.titleFont?.fontSize ? `${stat.titleFont.fontSize}px` : undefined,
              fontFamily: stat.titleFont?.fontFamily,
              fontWeight: stat.titleFont?.fontWeight,
              letterSpacing: stat.titleFont?.letterSpacing,
              lineHeight: stat.titleFont?.lineHeight
            }}
          >
            {stat.title}
          </div>
          <div
            className="stat-value"
            style={{
              color: stat.valueColor,
              fontSize: stat.valueFont?.fontSize ? `${stat.valueFont.fontSize}px` : undefined,
              fontFamily: stat.valueFont?.fontFamily,
              fontWeight: stat.valueFont?.fontWeight,
              letterSpacing: stat.valueFont?.letterSpacing,
              lineHeight: stat.valueFont?.lineHeight
            }}
          >
            {stat.value}
          </div>
        </div>
        {showTriangleDecorations && (
          <div className="triangle-decoration triangle-decoration--right" />
        )}
      </div>
    ));
  };

  // 渲染右侧项目
  const renderRightItems = () => {
    return rightItems?.map((item, index) => (
      <div
        key={`right-item-${index}`}
        className="right-item"
        onClick={item.onClick}
      >
        <img
          className="item-icon"
          src={item.iconPath}
          alt={item.text || ''}
          referrerPolicy="no-referrer"
        />
        <span
          className="item-text"
          style={{
            color: item.textColor,
            fontSize: item.fontSize ? `${item.fontSize}px` : undefined,
            fontFamily: item.fontFamily,
            fontWeight: item.fontWeight,
            letterSpacing: item.letterSpacing,
            lineHeight: item.lineHeight
          }}
        >
          {item.text}
        </span>
      </div>
    ));
  };

  return (
    <div
      ref={ref}
      className={panelClassName}
      style={{ 
        // 只在设计模式下应用传入的宽高，运行时使用CSS响应式
        ...((__designMode && width) && { width: typeof width === 'number' ? `${width}px` : width }),
        ...((__designMode && height) && { height: typeof height === 'number' ? `${height}px` : height }),
        ...style 
      }}
      onClick={handleClick}
      {...otherProps}
    >
      {/* 左侧面板 */}
      <div
        className="left-panel"
        style={{
          backgroundImage: leftBackgroundImage ? `url(${leftBackgroundImage})` : undefined
        }}
      >
        {renderLeftItems()}
      </div>

      {/* 中间面板 */}
      <div
        className="middle-panel"
        style={{
          backgroundImage: middleBackgroundImage ? `url(${middleBackgroundImage})` : undefined
        }}
      >
        {renderMiddleDataStats()}
      </div>

      {/* 右侧面板 */}
      <div
        className="right-panel"
        style={{
          backgroundImage: rightBackgroundImage ? `url(${rightBackgroundImage})` : undefined
        }}
      >
        {renderRightItems()}
      </div>
    </div>
  );
});

ComprehensiveDataPanel.displayName = 'ComprehensiveDataPanel';
export default ComprehensiveDataPanel; 